<template>
  <div class="set-phone" style>
    <news-page-header>设置密码</news-page-header>

    <div class="title weight">设置新密码</div>
    <div class="set-phone-explain">密码需为字母开头 / 6-12位字母、数字组合</div>
    <div style="margin-bottom:1rem;">
      <div class="region-input-box">
        <div class="input-body" style="position:relative;">
          <div class="input-box">
            <div class="input-content">
              <input
                @click="clearOk"
                class="input"
                v-model.trim="newPassword1"
                type="password"
                @blur="checkPassword1"
              />
              <span class="clear1 cancel" v-show="newPassword1.length" @click="clearPassword1"></span>
              <div
                class="content content1"
                v-show="!newPassword1.length"
                style="left:0;"
              >请输入您想使用的新密码</div>
            </div>
            <!---->
            <!---->
            <!---->
            <div class="bottom-line"></div>
            <div class="bottom-line-active"></div>
          </div>
          <div class="err-text" v-text="errText1"></div>
        </div>
      </div>
    </div>
    <div style="margin-bottom:1rem;">
      <div class="region-input-box">
        <div class="input-body" style="position:relative;">
          <div class="input-box">
            <div class="input-content">
              <input
                @click="clearOk"
                class="input"
                v-model.trim="newPassword2"
                type="password"
                @blur="checkPassword2"
              />
              <span class="clear1 cancel" v-show="newPassword2.length" @click="clearPassword2"></span>
              <div class="content content1" v-show="!newPassword2.length" style="left:0;">请确认新密码</div>
            </div>
            <!---->
            <!---->
            <!---->
            <div class="bottom-line"></div>
            <div class="bottom-line-active"></div>
          </div>
          <div class="err-text" v-text="errText2"></div>
        </div>
      </div>
    </div>

    <div class="footer">
      <span class="prex" @click="toSaveCenter">上一步</span>
      <div class="next">
        <div class="button disable-button" v-if="nextIsOk">下一步</div>
        <div class="button" v-else @click="eidtPassword">确认修改</div>
      </div>
    </div>

    <div class="msg-box flex-center" style="margin: 3.22rem auto;" v-if="setIsOk">
      <span class="msg-content">设置成功,请重新登录</span>
    </div>
    <div class="msg-box flex-center" style="margin: 3.22rem auto;" v-if="setIsNotOk">
      <span class="msg-content">设置失败，请重新填写</span>
    </div>
  </div>
</template>

<script>
import "../../assets/css/registerCss/setPhone.css";

import newsPageHeader from "../news/newsPageHeader";

export default {
  data() {
    return {
      nextIsOk: true,
      setIsOk: false,
      setIsNotOk: false,
      newPassword2: "",
      newPassword1: "",
      errText1: "",
      errText2: "",
      password1IsOk: false,
      password2IsOk: false
    };
  },
  components: {
    newsPageHeader
  },
  methods: {
    clearOk(){
this.nextIsOk=true;
    },
    checkPassword1() {
      let reg = /^[a-zA-Z][0-9a-zA-Z]{5,11}$/;

      if (!reg.test(this.newPassword1)) {
        this.errText1 = "请输入正确格式的密码";
        this.password1IsOk=false;

        setTimeout(() => {
          this.errText1 = "";
        }, 2000);
      } else {
        this.errText1 = "";
        this.password1IsOk=true;
      }
    },
    checkPassword2() {
      if (this.newPassword2 != this.newPassword1) {
        this.errText2 = "两次密码不一致，请输入正确";
        this.nextIsOk=true;
        this.password2IsOk=false;

        setTimeout(() => {
          this.errText2 = "";
        }, 2000);
      } else {
        this.errText2 = "";
        this.nextIsOk=false;
        this.password2IsOk=true;
      }
    },
  async  eidtPassword(){
      let sohuUsername = localStorage.getItem("sohuUsername");
      if(this.newPassword1&&this.newPassword2&&this.password1IsOk&&this.password2IsOk){
         let { data } = await this.$axios.put(
        "http://localhost:9394/users/editpassword",
        {
          username: sohuUsername,
          password: this.$md5(this.newPassword2)
        }
      );
      window.console.log(data);
      if (data.type) {
        //修改成功
        this.newPassword1 = "";
        this.newPassword2 = "";
        this.setIsOk=true;

        localStorage.removeItem("sohuToken");
        localStorage.removeItem("sohuUsername");
            
        setTimeout(() => {
          this.setIsOk = false;
          this.$router.push({ name: "login" });
        }, 1500);
      } else {
        //修改失败
        this.newPassword1 = "";
        this.newPassword2 = "";
        this.setIsNotOk=true;

        setTimeout(() => {
          this.setIsNotOk = false;
        }, 2000);
      }
        
      }
    },
    toSaveCenter() {
      this.$router.push({ name: "saveCenter" });
    },
    clearPassword1() {
      this.newPassword1 = "";
      this.nextIsOk=true;
      this.password1IsOk=false;
    },
    clearPassword2() {
      this.newPassword2 = "";
      this.nextIsOk=true;
      this.password2IsOk=false;
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {}
};
</script>
<style  scoped>
.set-phone-explain {
  transform: translateY(-2rem);
}
</style>
